<template>
    <view class="page-container">
        <!-- 表单内容区域 -->
        <view class="form-container">
            <u--form
                :model="form"
                :rules="rules"
                ref="uForm"
                labelPosition="top"
                labelWidth="auto"
                :labelStyle="{
                    margin: '20rpx 0 10rpx',
                    fontFamily: 'OPPOSans, OPPOSans',
                    fontWeight: 500,
                    fontSize: '30rpx',
                    color: '#151515'
                }"
            >
                <u-form-item label="姓名" prop="name" borderBottom>
                    <u--input v-model="form.name" border="none" placeholder="请输入姓名" placeholderClass="placeholder"/>
                </u-form-item>
                <u-form-item label="手机号" prop="phone" borderBottom>
                    <u--input v-model="form.phone" border="none"placeholder="请输入手机号" placeholderClass="placeholder" />
                </u-form-item>
                <u-form-item label="省/市/区" prop="area" borderBottom>
                    <pickerArea :modelValue.sync="form.area"/>
                </u-form-item>
                <u-form-item label="详细地址" prop="address" borderBottom >
                    <u--input v-model="form.address" border="none" placeholder="请输入详细地址" placeholderClass="placeholder" />
                </u-form-item>
                <u-form-item>
                    <view class="mrBox">
                        <u-switch v-model="form.isDefault" activeColor="#9F07B7" size="16"/>
                        <text :class="['setMr', form.isDefault && 'isMr']">设为默认</text>
                    </view>
                </u-form-item>
            </u--form>
        </view>
		
		<view class="addBtn" @tap="addNewAddress">
		    添加地址
		</view>
    </view>
</template>

<script>
    import { pickerArea } from "@/components/picker-area.vue"
    export default {
        name: 'AddAddress',
        components: {
            pickerArea
        },
        data() {
            return {
                form: {
                    name: '',
                    phone: '',
                    area: {},
                    address: '',
                    isDefault: false
                },
                rules: {
                    'name': { type: 'string', required: true, message: '请填写姓名', trigger: ['blur', 'change'] },
                    'phone': [{
						required: true, 
						message: '请输入手机号',
						trigger: ['change','blur'],
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change','blur'],
					}],
                    'area': [{
						validator: (rule, value, callback) => {
							if (value && value.value) {
								return true;
							} else {
								return false;
							}
						},
						message: '请选择省市区',
						trigger: ['change','blur'],
					}],
                    'address': { type: 'string', required: true, message: '请填写详细地址', trigger: ['blur', 'change'] },
                },
                showAreaPicker: false
            }
        },
        watch: {
            form: {
                handler(n) {
                    console.log(n)
                },
                deep: true
            }
        },
        onReady() {
            	this.$refs.uForm.setRules(this.rules)
        },
        methods: {
            addNewAddress() {
                this.$refs.uForm.validate().then(res => {
					uni.$u.toast('操作成功！')
					uni.redirectTo({
						url: '/pages/address/address'
					})
				})
            }
        }
    }
</script>

<style scoped lang="scss">
    .page-container {
        min-height: 100vh;
        padding: 30rpx;
        background-color: $uni-bg-color-grey;
        font-family: OPPOSans, OPPOSans;
        /* 表单内容区域 */
        .form-container {
            ::v-deep .placeholder {
                font-size: 36rpx;
                color: $uni-text-color-placeholder !important;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
            .mrBox {
                display: flex;
                align-items: center;
                .setMr {
                    margin-left: 20rpx;
                    font-size: 28rpx;
                }
                .isMr {
                    color: $uni-color-primary;
                }
            }
        }
		
		.addBtn {
            height: 98rpx;
            margin: 140rpx 30rpx 100rpx;
            border-radius: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: $uni-bg-color-btn;
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 32rpx;
            color: $uni-text-color-inverse;
        }
    }
</style>